<template>
    <div class="w-full p-8 flex justify-center">
        <a-form :model="formState">
            <div class="flex-between">
                <div class="font-bold">微信小程序配置</div>
                <a-button type="link">帮助</a-button>
            </div>
            <a-form-item label="小程序ID:" name="wx_id" required>
                <a-input v-model:value="formState.wx_id" placeholder="请输入微信小程序ID"></a-input>
            </a-form-item>

            <a-form-item label="小程序密匙:" name="wx_key" required>
                <a-input v-model:value="formState.wx_key" placeholder="请输入微信小程序密匙"></a-input>
            </a-form-item>

            <a-divider />

            <div class="flex-between">
                <div class="font-bold">QQ小程序配置</div>
                <a-button type="link">帮助</a-button>
            </div>
            <a-form-item label="小程序ID:" name="qq_id" required>
                <a-input v-model:value="formState.qq_id" placeholder="请输入qq小程序ID"></a-input>
            </a-form-item>

            <a-form-item label="小程序密匙:" name="qq_key" required>
                <a-input v-model:value="formState.qq_key" placeholder="请输入qq小程序密匙"></a-input>
            </a-form-item>

            <a-divider />

            <div class="flex-between">
                <div class="font-bold">字节跳动小程序配置</div>
                <a-button type="link">帮助</a-button>
            </div>
            <a-form-item label="小程序ID:" name="dy_id" required>
                <a-input v-model:value="formState.dy_id" placeholder="请输入抖音小程序ID"></a-input>
            </a-form-item>

            <a-form-item label="小程序密匙:" name="dy_key" required>
                <a-input v-model:value="formState.dy_key" placeholder="请输入抖音小程序密匙"></a-input>
            </a-form-item>


            <a-button @click.prevent="onSubmit" type="primary" html-type="submit" size="large">提交保存</a-button>

        </a-form>
    </div>
</template>

<script setup lang="ts">
const formState = reactive<{
    [key: string] : string
}>({
    wx_id: '',
    wx_key: '',
    qq_id: '',
    qq_key: '',
    dy_id: '',
    dy_key: ''
})

const onSubmit = () => {
    alert(JSON.stringify(formState))
    reset()
}
const reset = () => {
    Object.keys(formState).forEach((key: string) => {
        formState[key] = ''
    })
}
</script>